<template>
  <div style="margin: 40px 20px">
    <el-card class="box-card" style="width: 1000px; min-height: 600px">
      <template #header>
        <div class="title">
          <span>实名信息</span>
        </div>
      </template>
      <div>
        <div class="warn">
          <el-icon><Warning /></el-icon>
          完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
        </div>
        <!-- 如果就诊人未完成实名认证用表单收集就诊人实名信息 -->
        <div class="conForm" v-if="userInfo?.authStatus === 0">
          <el-form>
            <el-form-item label="用户姓名" required>
              <el-input
                v-model="formData.name"
                placeholder="请输入用户名姓名"
                style="width: 380px"
              ></el-input>
            </el-form-item>
            <el-form-item label="证件类型" required>
              <el-select
                v-model="formData.certificatesType"
                style="width: 380px"
              >
                <el-option label="身份证" value="身份证"></el-option>
                <el-option label="户口本" value="户口本"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" required>
              <el-input
                v-model="formData.certificatesNo"
                placeholder="请输入证件号码"
                style="width: 380px"
              ></el-input>
            </el-form-item>
            <el-form-item label="上传证件" required>
              <el-upload
                class="avatar-uploader"
                :action="code"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeUpload"
              >
                <img
                  v-if="formData.certificatesUrl"
                  :src="formData.certificatesUrl"
                  class="avatar"
                />
                <img
                  style="width: 148px; height: 148px"
                  v-else
                  src="../../../../public/static/uploadImgEX.png"
                  alt=""
                />
              </el-upload>
            </el-form-item>
            <el-form-item style="margin-left: 80px">
              <el-button type="primary" @click="addUserInfo">提交</el-button>
              <el-button @click="rewriteInfo">重写</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 如果有就诊人实名信息则用表格展示 -->
        <div v-else>
          <el-descriptions border :column="1" size="default">
            <el-descriptions-item label="用户姓名" label-class-name="desItem" >{{
              formData.name
            }}</el-descriptions-item>
            <el-descriptions-item label="证件类型" label-class-name="desItem">{{
              formData.certificatesType
            }}</el-descriptions-item>
            <el-descriptions-item label="证件号码" label-class-name="desItem">{{
              formData.certificatesNo
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Certification",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";

import type { UploadProps } from "element-plus";
import { reqUserInfo, reqAddUser } from "@/api/user";
import type { userInfoType, addUserType } from "@/api/user";

// 实名信息收集表单数据
const formData = ref<addUserType>({
  // 证件号码
  certificatesNo: "",
  // 证件类型
  certificatesType: "",
  // 上传图片地址
  certificatesUrl: "",
  // 用户姓名
  name: "",
});

// 上传图片接口地址
const code = ref("http://syt-api.atguigu.cn/api/oss/file/fileUpload");
// 请求用户的实名信息
const userInfo = ref<userInfoType>();
// 上传图片
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  _response,
  uploadFile
) => {
  formData.value.certificatesUrl = URL.createObjectURL(uploadFile.raw!);
};

// 上传图片校验
const beforeUpload: UploadProps["beforeUpload"] = (file) => {
  const extensions = ["image/jpeg", "image/png"];
  // 限制图片格式
  if (!extensions.includes(file.type)) {
    ElMessage.error("只能上传jpeg和png格式的图片");
    return false; // 取消上传
    // 限制图片大小
  } else if (file.size / 1024 / 1024 > 2) {
    ElMessage.error("上传图片过大");
    return false;
  }
  return true; // 继续上传
};

// 添加实名认证信息
const addUserInfo = async () => {
  console.log(formData.value);
  try {
    await reqAddUser(formData.value);
    ElMessage.success("添加实名信息成功");
    getUserInfo();
  } catch (e) {
    ElMessage.error("添加实名信息失败");
  }
};

// 重写实名信息
const rewriteInfo = () => {
  formData.value = {
    // 证件号码
    certificatesNo: "",
    // 证件类型
    certificatesType: "",
    // 上传图片地址
    certificatesUrl: "",
    // 用户姓名
    name: "",
  };
};

// 获取已存在用户信息
const getUserInfo = async () => {
  const res = await reqUserInfo();
  userInfo.value = res
  console.log(res);
  const { certificatesNo, certificatesType, certificatesUrl, name,authStatus } = res;
  if (authStatus === 1) {
    formData.value = {
      certificatesNo,
      certificatesType,
      certificatesUrl,
      name,
    };
  }
};
getUserInfo();
</script>

<style scoped>
.warn {
  vertical-align: baseline;
  font-weight: 400;
  color: #7f7f7f;
  font-size: 14px;
  margin: 0 auto 14px;
  text-align: center;
}
.title {
  font-size: 21px;
  font-weight: 500;
}

.conForm {
  width: 500px;
  margin: 0 auto;
}

.avatar-uploader .avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.avatar-uploader {
  width: 148px;
  height: 148px;
}
.desItem{
  width:100px
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
